<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body style="background: #01253f">
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-row>
            <el-col :span="12">
                <p style="font-size:20px;font-weight: 900;color: #00c5cc"><strong>| 焦作市服务商联网情况</strong></p>
                <div style="height: 120px;border: 1px solid #00c5cc">
                    <table border="0" width="100%" cellspacing="0" cellpadding="10" style="color: white;">
                        <tr align="center" style="font-size: 28px;color: #00c5cc">
                            <td>6</td>
                            <td>80%</td>
                            <td>80%</td>
                            <td>81</td>
                        </tr>
                       <tr align="center">
                           <td>服务商数量</td>
                           <td>平均数据上报情况</td>
                           <td>平均巡查完成情况</td>
                           <td>平均评分</td>
                       </tr>
                    </table>
                </div>
                <div id="myChart" style="height: 300px;width: 100%"></div>
            </el-col>
            <el-col :span="11" :offset="1">
                <table width="100%" border="1" cellspacing="0" cellpadding="10" style="font-size: 14px;color:white;font-weight: 900" bordercolor="#0081ff">
                    <tr align="center" style="background: darkblue">
                        <th rowspan="2">服务商公司</th>
                        <th rowspan="2">注册企业数</th>
                        <th colspan="4">风险企业分类</th>
                        <th rowspan="2">管控风险点数</th>
                        <th rowspan="2">巡查完成情况</th>
                        <th rowspan="2">风险上报情况</th>
                        <th rowspan="2">评分</th>
                    </tr>

                    <tr  align="center" style="background: darkblue">
                        <th>Ⅰ级</th>
                        <th>Ⅱ级</th>
                        <th>Ⅲ级</th>
                        <th>Ⅳ级</th>
                    </tr>
                    <tr align="center" v-for="(item,index) in tableData" :key="index">
                        <td>{{item.companyName}}</td>
                        <td>{{item.companys}}</td>
                        <td>{{item.one}}</td>
                        <td>{{item.two}}</td>
                        <td>{{item.three}}</td>
                        <td>{{item.four}}</td>
                        <td>{{item.number1}}</td>
                        <td>{{item.number2}}</td>
                        <td>{{item.number3}}</td>
                        <td>{{item.point}}</td>
                    </tr>
                </table>
            </el-col>
        </el-row>
        <el-row>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            tableData:[]
        },
        created: function () {
            $('.page').show();
            this.loadData();

        },
        methods: {

            loadData: function () {
                this.tableData = [
                    {companyName:'杭州开地信息技术有限公司',companys:'100',one:'25',two:'25',three:'25',four:'25',number1:'300',number2:'85%',number3:'90%',point:'84'},
                    {companyName:'杭州开地信息技术有限公司',companys:'100',one:'25',two:'25',three:'25',four:'25',number1:'300',number2:'85%',number3:'90%',point:'84'},
                    {companyName:'杭州开地信息技术有限公司',companys:'100',one:'25',two:'25',three:'25',four:'25',number1:'300',number2:'85%',number3:'90%',point:'84'},
                    {companyName:'杭州开地信息技术有限公司',companys:'100',one:'25',two:'25',three:'25',four:'25',number1:'300',number2:'85%',number3:'90%',point:'84'},
                    {companyName:'杭州开地信息技术有限公司',companys:'100',one:'25',two:'25',three:'25',four:'25',number1:'300',number2:'85%',number3:'90%',point:'84'},
                    {companyName:'杭州开地信息技术有限公司',companys:'100',one:'25',two:'25',three:'25',four:'25',number1:'300',number2:'85%',number3:'90%',point:'84'},
                    ];

            },
            drawChart(){
                let  option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['服务商评分'],
                        textStyle:{
                            color:'#FFFFFF',
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',

                        axisLabel: {
                            show: true,
                            textStyle: {
                                color:'#FFFFFF' //
                            }
                        },
                    },
                    yAxis: {
                        type: 'category',
                        data: ['杭州开地信息技术有限公司', '杭州开地信息技术有限公司', '杭州开地信息技术有限公司', '杭州开地信息技术有限公司', '杭州开地信息技术有限公司', '杭州开地信息技术有限公司'],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color:'#FFFFFF' //
                            }
                        },
                    },
                    series: [
                        {
                            name: '2011年',
                            type: 'bar',
                            data: [84,86 , 87, 88, 90, 98]
                        },
                    ]
                };
                let myChart = echarts.init(document.getElementById('myChart'));
                myChart.setOption(option);

                window.onresize = function () {
                    myChart.resize();//

                }
            }


        },

        mounted: function () {
            this.drawChart();
        }
    });
</script>
</body>
</html>
